<template>
	<view class="publish-container">
		
		<!-- 招工要求卡片 -->
		<view class="info-card">
			<view class="card-header">
				<text class="card-title">招工要求</text>
				<view class="edit-btn" @click="editRequirements">
					<text>修改</text>
					<text class="arrow">></text>
				</view>
			</view>
			<view class="card-content">
				<view class="info-item">
					<text class="info-value">{{selectedJobType}}</text>
				</view>
				<view class="info-item">
					<text class="info-value">性别不限</text>
					<text class="info-value age-limit">16岁-不限</text>
				</view>
				<view class="info-item">
					<text class="info-value">提前到场</text>
				</view>
			</view>
		</view>
		
		<!-- 干活时间卡片 -->
		<view class="info-card">
			<view class="card-header">
				<text class="card-title">干活时间</text>
				<view class="edit-btn" @click="editWorkTime">
					<text>修改</text>
					<text class="arrow">></text>
				</view>
			</view>
			<view class="card-content">
				<view class="info-item">
					<text class="info-value date">03月12日今天</text>
				</view>
				<view class="time-info">
					<view class="time-block">
						<text class="time-label">开工时间</text>
						<text class="time-value">{{startHour}}:{{startMinute}}</text>
					</view>
					<view class="work-hours">
						<text class="hours-value">{{workHours}}工时</text>
						<text class="hours-icon">?</text>
						<text class="hours-desc">每日工作时长</text>
						<view class="arrow-right"></view>
					</view>
					<view class="time-block">
						<text class="time-label">收工时间</text>
						<text class="time-value">{{endHour}}:{{endMinute}}</text>
					</view>
				</view>
				<view class="break-time" @click="editBreakTime">
					<text>{{breakTimeText}}</text>
				</view>
			</view>
		</view>
		
		<!-- 干活地点卡片 -->
		<view class="info-card">
			<view class="card-header">
				<text class="card-title">干活地点</text>
				<view class="edit-btn" @click="editLocation">
					<text>修改</text>
					<text class="arrow">></text>
				</view>
			</view>
			<view class="card-content">
				<view class="location-info">
					<view class="location-icon">
						<text class="dot"></text>
					</view>
					<view class="location-detail">
						<text class="location-name">金桥区万金山山塘</text>
						<text class="location-address">浙江省杭州市金桥区</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 需求人数卡片 -->
		<view class="info-card">
			<view class="card-header">
				<text class="card-title">需求人数</text>
			</view>
			<view class="card-content">
				<view class="free-notice">
					<text>首单免费发布（限制3人及以下）</text>
				</view>
				<view class="counter">
					<view class="minus-btn" @click="decreaseWorkers">-</view>
					<view class="count-display">
						<text class="count-value">2</text>
						<text class="count-unit">人</text>
					</view>
					<view class="plus-btn" @click="increaseWorkers">+</view>
				</view>
			</view>
		</view>
		
		<!-- 工价设置卡片 -->
		<view class="info-card">
			<view class="card-header price-header">
				<text class="card-title">工价设置</text>
				<view class="price-tabs">
					<view class="tab" :class="{ active: priceType === 'hour' }" @click="priceType = 'hour'">
						<text>计时</text>
					</view>
					<view class="tab" :class="{ active: priceType === 'piece' }" @click="priceType = 'piece'">
						<text>计件</text>
					</view>
				</view>
			</view>
			<view class="card-content">
				<view class="price-input-container">
					<view class="minus-btn" @click="decreasePrice">-</view>
					<view class="price-input">
						<input type="number" v-model="price" />
						<text class="price-unit">元/时</text>
					</view>
					<view class="plus-btn" @click="increasePrice">+</view>
					<view class="contact-tag">
						<text>接单人多</text>
					</view>
				</view>
				
				<view class="price-slider">
					<view class="slider-bar">
						<view class="slider-fill" :style="{ width: getSliderWidth() }"></view>
					</view>
					<view class="slider-labels">
						<text class="min-price">¥12</text>
						<text class="mid-price-1">¥25</text>
						<text class="mid-price-2">¥40</text>
						<text class="max-price">¥100</text>
						<text class="price-suffix">+</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 零工意外保障卡片 -->
		<view class="info-card">
			<view class="card-header">
				<text class="card-title">零工意外保障</text>
				<view class="insurance-info">
					<text>11万意外保障</text>
					<text class="arrow">></text>
				</view>
			</view>
			<view class="card-content">
				<view class="insurance-desc">
					<text>保24小时，保上下班</text>
				</view>
			</view>
		</view>
		
		<!-- 高级设置卡片 -->
		<view class="info-card">
			<view class="card-content advanced-settings">
				<view class="settings-btn" @click="showAdvancedSettings">
					<text class="settings-text">高级设置</text>
					<text class="arrow-down">▼</text>
				</view>
			</view>
		</view>
		
		<!-- 联系电话卡片 -->
		<view class="info-card">
			<view class="card-header">
				<text class="card-title">联系电话</text>
				<view class="phone-number">
					<text>15910881964</text>
					<text class="arrow">></text>
				</view>
			</view>
		</view>
		
		<!-- 协议说明 -->
		<view class="agreement-section">
			<view class="agreement-item">
				<text class="item-num">1.</text>
				<text class="item-text">发布招工即表示遵守</text>
				<text class="item-link" @click="showRules">《快马日结信息发布规则》</text>
				<text class="item-text">，如有违规将致账号异常</text>
			</view>
			<view class="agreement-item">
				<text class="item-num">2.</text>
				<text class="item-text">发布招工即表示您同意与求职者签订</text>
				<text class="item-link" @click="showAgreement">《灵活用工协议》</text>
				<text class="item-text">，承担本协议约定的权利义务。</text>
			</view>
			<view class="agreement-item">
				<text class="item-num">3.</text>
				<text class="item-text">发布招工即表示您已阅读并同意</text>
				<text class="item-link" @click="showPrivacy">《保险客户告知书》</text>
			</view>
		</view>
		
		<!-- 客服悬浮按钮 -->
		<view class="float-service-btn" @click="contactService">
			<image src="/static/images/service.png" mode="aspectFit"></image>
			<text>客服</text>
		</view>
		
		<!-- 定位按钮 -->
		<view class="location-btn" @click="getCurrentLocation">
			<image src="/static/images/location.png" mode="aspectFit"></image>
		</view>
		
		<!-- 底部按钮 -->
		<view class="bottom-actions">
			<button class="publish-btn" @click="publishJob">立即发布</button>
		</view>
		
		<!-- 工种选择弹窗 -->
		<job-type-popup
			:show="showJobTypePopup"
			:job-types="jobTypes"
			:initial-selected-index="selectedJobTypeIndex"
			@close="closeJobTypePopup"
			@confirm="confirmJobType"
		></job-type-popup>
		
		<!-- 休息时间选择弹窗 -->
		<break-time-popup 
			:show="showBreakTimePopup"
			:initial-start-hour="breakStartHour"
			:initial-start-minute="breakStartMinute"
			:initial-end-hour="breakEndHour"
			:initial-end-minute="breakEndMinute"
			@close="closeBreakTimePopup"
			@confirm="confirmBreakTime"
		></break-time-popup>
	</view>
</template>

<script>
	import BreakTimePopup from '../../components/BreakTimePopup.vue'
	import JobTypePopup from '../../components/JobTypePopup.vue'
	
	export default {
		components: {
			BreakTimePopup,
			JobTypePopup
		},
		data() {
			return {
				workerCount: 2,
				maxFreeWorkers: 3,
				priceType: 'hour',
				price: 100,
				minPrice: 12,
				maxPrice: 100,
				showJobTypePopup: false,
				selectedJobTypeIndex: 0,
				selectedJobType: '电子厂普工',
				jobTypes: [
					{
						name: '电子厂普工',
						desc: '操作工/流水线/电/打螺丝/打包/包装/测试'
					},
					{
						name: '五金厂CNC操作工',
						desc: '上料/下料/剪料/钻孔/攻牙/冲床/压床'
					},
					{
						name: '注塑厂注塑工',
						desc: '注塑机操作/开模/打包/压花/剪料/磨水口/取镶嵌'
					},
					{
						name: '快递分拣扫码',
						desc: '物流仓库扫描/拍照/贴标/粘贴/分拣/包装/打包'
					},
					{
						name: '快递搬运装卸工',
						desc: '搬运/装卸/打包/装货拉货'
					},
					{
						name: '电商站标打包',
						desc: '电商打包/包装/贴标/分拣/理货/装货/装箱/贴标/商品上架'
					},
					{
						name: '电商手工活',
						desc: '挂牌/折盒/装袋/组装/贴标/贴纸/配货/粘手工活'
					}
				],
				// 工作时间相关
				startHour: '17',
				startMinute: '50',
				endHour: '18',
				endMinute: '20',
				workHours: '3.5',
				// 休息时间相关
				showBreakTimePopup: false,
				breakStartHour: '17',
				breakStartMinute: '50',
				breakEndHour: '18',
				breakEndMinute: '20',
				breakDuration: '0.5',
				breakTimeText: '已设置1个休息时段',
				hasBreakTime: true
			}
		},
		onLoad() {
			// 初始化页面数据
			console.log('页面加载完成，初始化数据');
			this.showJobTypePopup = false;
			this.showBreakTimePopup = false;
		},
		onShow() {
			// 页面显示时检查组件状态
			console.log('页面显示，检查组件状态');
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			editRequirements() {
				console.log('打开工种选择弹窗');
				this.$nextTick(() => {
					this.showJobTypePopup = true;
				});
			},
			editWorkTime() {
				// 显示工作时间选择弹窗
				this.showBreakTimePopup = true;
			},
			editBreakTime() {
				
			},
			editLocation() {
				uni.showToast({
					title: '修改干活地点',
					icon: 'none'
				});
			},
			decreaseWorkers() {
				if (this.workerCount > 1) {
					this.workerCount--;
				}
			},
			increaseWorkers() {
				this.workerCount++;
			},
			decreasePrice() {
				if (this.price > this.minPrice) {
					this.price -= 5;
				}
			},
			increasePrice() {
				if (this.price < this.maxPrice * 2) {
					this.price += 5;
				}
			},
			getSliderWidth() {
				// 计算滑块填充宽度的百分比
				const percentage = Math.min(100, (this.price / this.maxPrice) * 100);
				return `${percentage}%`;
			},
			showAdvancedSettings() {
				uni.showToast({
					title: '高级设置功能即将上线',
					icon: 'none'
				});
			},
			showRules() {
				uni.showToast({
					title: '查看发布规则',
					icon: 'none'
				});
			},
			showAgreement() {
				uni.showToast({
					title: '查看灵活用工协议',
					icon: 'none'
				});
			},
			showPrivacy() {
				uni.showToast({
					title: '查看保险客户告知书',
					icon: 'none'
				});
			},
			contactService() {
				uni.showToast({
					title: '联系客服',
					icon: 'none'
				});
			},
			getCurrentLocation() {
				console.log('获取当前位置');
				uni.showToast({
					title: '正在定位...',
					icon: 'none'
				});
				
				// 调用定位API
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log('定位成功', res);
						// 这里可以根据获取到的经纬度更新地址信息
						uni.showToast({
							title: '定位成功',
							icon: 'success'
						});
					},
					fail: (err) => {
						console.error('定位失败', err);
						uni.showToast({
							title: '定位失败，请检查定位权限',
							icon: 'none'
						});
					}
				});
			},
			publishJob() {
				uni.showToast({
					title: '发布成功',
					icon: 'success'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			},
			closeJobTypePopup() {
				console.log('关闭工种选择弹窗 - 父组件');
				this.showJobTypePopup = false;
			},
			confirmJobType(data) {
				this.selectedJobTypeIndex = data.index;
				this.selectedJobType = data.jobType.name;
				this.closeJobTypePopup();
				uni.showToast({
					title: '工种已选择',
					icon: 'success'
				});
			},
			// 休息时间相关方法
			closeBreakTimePopup() {
				console.log('关闭休息时间选择弹窗 - 父组件');
				this.showBreakTimePopup = false;
			},
			confirmBreakTime(timeData) {
				// 更新休息时间数据
				this.breakStartHour = timeData.startHour;
				this.breakStartMinute = timeData.startMinute;
				this.breakEndHour = timeData.endHour;
				this.breakEndMinute = timeData.endMinute;
				this.breakDuration = timeData.duration;
				
				this.hasBreakTime = true;
				this.breakTimeText = `已设置1个休息时段`;
				this.closeBreakTimePopup();
				
				uni.showToast({
					title: '休息时间已设置',
					icon: 'success'
				});
			}
		}
	}
</script>

<style lang="scss">
	.publish-container {
		min-height: 100vh;
		background: #f5f7fa;
		padding-bottom: 100px;
	}
	
	.nav-bar {
		background: #fff;
		padding-top: var(--status-bar-height);
		
		.nav-content {
			height: 44px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 15px;
			
			.back-btn {
				width: 24px;
				height: 24px;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.iconfont {
					font-size: 20px;
					color: #333;
				}
			}
			
			.nav-title {
				font-size: 18px;
				font-weight: bold;
				color: #333;
			}
			
			.placeholder {
				width: 24px;
			}
		}
	}
	
	.info-card {
		background: #fff;
		margin: 12px 12px 0;
		border-radius: 8px;
		overflow: hidden;
		
		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15px;
			border-bottom: 1px solid #f0f0f0;
			
			&.price-header {
				border-bottom: none;
			}
			
			.card-title {
				font-size: 16px;
				font-weight: bold;
				color: #333;
			}
			
			.edit-btn {
				display: flex;
				align-items: center;
				
				text {
					font-size: 14px;
					color: #ff9500;
				}
				
				.arrow {
					margin-left: 4px;
				}
			}
			
			.price-tabs {
				display: flex;
				
				.tab {
					padding: 5px 15px;
					font-size: 14px;
					color: #999;
					position: relative;
					
					&.active {
						color: #333;
						font-weight: bold;
						
						&::after {
							content: '';
							position: absolute;
							bottom: -15px;
							left: 0;
							width: 100%;
							height: 2px;
							background: #ffd000;
						}
					}
				}
			}
			
			.insurance-info, .phone-number {
				font-size: 14px;
				color: #666;
				display: flex;
				align-items: center;
				
				.arrow {
					margin-left: 4px;
					color: #999;
				}
			}
		}
		
		.card-content {
			padding: 15px;
			
			&.advanced-settings {
				display: flex;
				justify-content: center;
				padding: 10px 15px;
			}
			
			.info-item {
				display: flex;
				margin-bottom: 10px;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.info-value {
					font-size: 15px;
					color: #333;
					margin-right: 20px;
				}
				
				.age-limit {
					color: #666;
				}
			}
			
			.date {
				font-size: 15px;
				color: #333;
				margin-bottom: 15px;
				display: block;
			}
			
			.time-info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 15px;
				
				.time-block {
					display: flex;
					flex-direction: column;
					align-items: center;
					
					.time-label {
						font-size: 12px;
						color: #999;
						margin-bottom: 5px;
					}
					
					.time-value {
						font-size: 18px;
						font-weight: bold;
						color: #333;
					}
				}
				
				.work-hours {
					position: relative;
					background: #f5f7fa;
					padding: 8px 15px;
					border-radius: 20px;
					display: flex;
					align-items: center;
					
					.hours-value {
						font-size: 14px;
						font-weight: bold;
						color: #333;
					}
					
					.hours-icon {
						width: 16px;
						height: 16px;
						background: #ccc;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 12px;
						color: #fff;
						margin-left: 5px;
					}
					
					.hours-desc {
						font-size: 12px;
						color: #999;
						margin-left: 5px;
					}
					
					.arrow-right {
						width: 0;
						height: 0;
						border-top: 5px solid transparent;
						border-bottom: 5px solid transparent;
						border-left: 5px solid #ccc;
						margin-left: 5px;
					}
				}
			}
			
			.break-time {
				background: #f0f7ff;
				padding: 10px;
				border-radius: 4px;
				text-align: center;
				
				text {
					font-size: 14px;
					color: #3370ff;
				}
			}
			
			.location-info {
				display: flex;
				align-items: flex-start;
				
				.location-icon {
					margin-right: 10px;
					margin-top: 5px;
					
					.dot {
						width: 10px;
						height: 10px;
						background: #3370ff;
						border-radius: 50%;
						display: block;
					}
				}
				
				.location-detail {
					display: flex;
					flex-direction: column;
					
					.location-name {
						font-size: 15px;
						color: #333;
						margin-bottom: 5px;
					}
					
					.location-address {
						font-size: 12px;
						color: #999;
					}
				}
			}
			
			.free-notice {
				font-size: 14px;
				color: #999;
				margin-bottom: 15px;
			}
			
			.counter {
				display: flex;
				align-items: center;
				justify-content: center;
				
				.minus-btn, .plus-btn {
					width: 40px;
					height: 40px;
					background: #f5f7fa;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24px;
					color: #333;
					border-radius: 4px;
				}
				
				.count-display {
					width: 120px;
					height: 40px;
					background: #f5f7fa;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0 10px;
					border-radius: 4px;
					
					.count-value {
						font-size: 24px;
						font-weight: bold;
						color: #333;
					}
					
					.count-unit {
						font-size: 14px;
						color: #666;
						margin-left: 5px;
					}
				}
			}
			
			.price-input-container {
				display: flex;
				align-items: center;
				position: relative;
				
				.minus-btn, .plus-btn {
					width: 40px;
					height: 40px;
					background: #f5f7fa;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24px;
					color: #333;
					border-radius: 4px;
				}
				
				.price-input {
					flex: 1;
					height: 40px;
					background: #f5f7fa;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0 10px;
					border-radius: 4px;
					position: relative;
					
					input {
						width: 80%;
						height: 100%;
						text-align: center;
						font-size: 24px;
						font-weight: bold;
					}
					
					.price-unit {
						position: absolute;
						right: 10px;
						font-size: 14px;
						color: #666;
					}
				}
				
				.contact-tag {
					position: absolute;
					right: -5px;
					top: -15px;
					background: #4cd964;
					color: #fff;
					font-size: 12px;
					padding: 3px 8px;
					border-radius: 12px;
					
					&::after {
						content: '';
						position: absolute;
						bottom: -5px;
						left: 50%;
						transform: translateX(-50%);
						width: 0;
						height: 0;
						border-left: 5px solid transparent;
						border-right: 5px solid transparent;
						border-top: 5px solid #4cd964;
					}
				}
			}
			
			.price-slider {
				margin-top: 20px;
				
				.slider-bar {
					height: 4px;
					background: #eee;
					border-radius: 2px;
					position: relative;
					
					.slider-fill {
						position: absolute;
						left: 0;
						top: 0;
						height: 100%;
						background: linear-gradient(to right, #ff6b6b, #ffd000, #4cd964);
						border-radius: 2px;
					}
				}
				
				.slider-labels {
					display: flex;
					justify-content: space-between;
					margin-top: 5px;
					
					text {
						font-size: 12px;
						color: #999;
					}
				}
			}
			
			.insurance-desc {
				font-size: 14px;
				color: #666;
			}
			
			.settings-btn {
				display: flex;
				align-items: center;
				
				.settings-text {
					font-size: 14px;
					color: #3370ff;
				}
				
				.arrow-down {
					font-size: 12px;
					color: #3370ff;
					margin-left: 5px;
				}
			}
		}
	}
	
	.agreement-section {
		padding: 15px;
		margin-bottom: 60px;
		
		.agreement-item {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 10px;
			
			.item-num {
				font-size: 12px;
				color: #999;
				margin-right: 5px;
			}
			
			.item-text {
				font-size: 12px;
				color: #999;
			}
			
			.item-link {
				font-size: 12px;
				color: #3370ff;
			}
		}
	}
	
	.float-service-btn {
		position: fixed;
		right: 15px;
		bottom: 80px;
		width: 50px;
		height: 50px;
		background: #fff;
		border-radius: 25px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		
		image {
			width: 24px;
			height: 24px;
			margin-bottom: 2px;
		}
		
		text {
			font-size: 10px;
			color: #666;
		}
	}
	
	.location-btn {
		position: fixed;
		right: 15px;
		bottom: 150px;
		width: 40px;
		height: 40px;
		background: #fff;
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		z-index: 90;
		
		image {
			width: 20px;
			height: 20px;
		}
	}
	
	.bottom-actions {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		background: #fff;
		padding: 10px 15px;
		box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05);
		
		.publish-btn {
			width: 100%;
			height: 44px;
			line-height: 44px;
			background: #ffd000;
			color: #333;
			font-size: 16px;
			font-weight: bold;
			border-radius: 22px;
			border: none;
			
			&::after {
				border: none;
			}
		}
	}
</style> 